<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>人工客服</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">
    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Import component library -->
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(200deg,#f3e7e9,#e3eeff);
        }
        #message {
            width: 100%;
            height: calc(100% - 140px); /* 调整消息框的高度，以适应屏幕 */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            margin: 0 auto;
            overflow: auto;
        }
        #textArea {
            width: calc(100% - 130px); /* 调整输入框的宽度，以适应屏幕 */
            margin-top: 10px;
            margin-left: 10px;
        }
        #sendMessage {
            width: 100px;
            margin-top: 10px;
            margin-left: 10px;
            /* 其他样式调整 */
        }
        .flex {
            position: absolute;
            top: 8%;
            right:3%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 999; /* 确保标签在顶部 */
        }
    </style>
</head>

<body>
<div class="navbar">
    <input type="checkbox" id="checkbox">
    <ul>

        <li style="margin-top: 20px;">
            <a href="#" onclick="history.go(-1); return false;">
                <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                <div>返回</div>
            </a>
        </li>
    </ul>
    <div class="main" style="margin-top: -180px; height: 800px;">
        <div style="margin-top: -90px;">
            <p style="margin: 0 auto;text-align: center;font-family: 'Microsoft YaHei UI',serif;font-size: 30px;color: #a262ad;">人工客服窗口</p>
            <div id="message" style="width: 1200px; height: 500px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2); border-radius: 5px; margin: 0 auto;overflow: auto;"></div>
        </div>
        <div style=" width: 1200px; position: absolute; margin-top: 550px;">
            <textarea id="textArea" class="textarea textarea-bordered" placeholder="请输入文字" style="width: 1180px;"></textarea>
        </div>
        <div style="margin: 0 auto;width: 1200px; position: absolute; margin-top: 700px;">
            <button onclick="send()" id="sendMessage" class="btn" style="width: 100px;">发送</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var websocket = null;
    var clientId = "user";
    var confettiShown = false;

    var htmlToInsert = `
      <div class="chat chat-end">
        <div class="chat-image avatar">
            <div class="w-10 rounded-full">
                <img alt="Tailwind CSS chat bubble component"  src="http://localhost:8080/MillionYuan/img/Chat/User.png"  />
            </div>
        </div>
        <div class="chat-header">
            你
        </div>
        <div class="chat-bubble"  style="background: #ffffff; color: black;">
    `;

    var htmlToGptInsert = `
    <div class="chat chat-start">
            <div class="chat-image avatar">
              <div class="w-10 rounded-full">
                <img alt="Tailwind CSS chat bubble component"  src="http://localhost:8080/MillionYuan/img/Chat/kefu.jpeg"  />
              </div>
            </div>
            <div class="chat-header">
              客服
            </div>
            <div class="chat-bubble"  style="background: #ffffff; color: black;">
    `;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/MillionYuan/ws/"+clientId);
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(){
        // setMessageInnerHTML("聊天室连接成功");
    };

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        // setMessageInnerHTML("与服务器断开连接！");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        console.log(innerHTML);
        var message = getMessageAfterHyphen(innerHTML);
        var gptMessage = htmlToGptInsert + message + '</div></div>';
        var userMessage = htmlToInsert + message + '</div></div>';
        if(innerHTML.indexOf("user")){
            document.getElementById('message').innerHTML += gptMessage;
        }else if (innerHTML.indexOf("admin")){
            document.getElementById('message').innerHTML += userMessage;
        }
    }

    //发送消息
    function send(){
        var message = document.getElementById('textArea').value;
        document.getElementById('textArea').value = '';
        websocket.send(message);
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //清空消息
    function clearMessages() {
        document.getElementById('message').innerHTML = "";
    }

    const confetti = new JSConfetti();

    // 绑定点击事件
    // 获取消息框的元素
    var messageBox = document.getElementById("message");

    // 每当消息框中的内容变化时，将滚动条位置设置到底部
    messageBox.addEventListener("DOMSubtreeModified", function() {
        messageBox.scrollTop = messageBox.scrollHeight;
    });

    function getMessageAfterHyphen(str) {
        const parts = str.split('-'); // 使用 "-" 进行分割
        if (parts.length > 1) { // 确保字符串中包含 "-"
            return parts[1]; // 返回 "-" 后面的内容
        } else {
            return ''; // 如果字符串中不包含 "-", 返回空字符串
        }
    }
</script>
</html>